﻿<!DOCTYPE html>
<html>
  <head>
    <title>布局</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/布局/styles.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
@font-face {
font-family:Ionicons;
src:url(https://cdnjs.cloudflare.com/ajax/libs/iview/3.0.1/styles/fonts/ionicons.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/iview/3.0.1/styles/fonts/ionicons.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/iview/3.0.1/styles/fonts/ionicons.svg#Ionicons) format("svg");
font-weight:400;
font-style:normal
}
    </style>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/布局/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (Rectangle) -->
      <div id="u1040" class="ax_default box_1">
        <div id="u1040_div" class=""></div>
      </div>

      <!-- Unnamed (Vertical Line) -->
      <div id="u1041" class="ax_default line">
        <img id="u1041_img" class="img " src="images/布局/u1041.png"/>
      </div>

      <!-- Unnamed (Header) -->

      <!-- Unnamed (Dynamic Panel) -->
      <div id="u1043" class="ax_default">
        <div id="u1043_state0" class="panel_state" data-label="State1" style="">
          <div id="u1043_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u1044" class="ax_default box_2">
              <div id="u1044_div" class=""></div>
              <div id="u1044_text" class="text ">
                <p><span>&nbsp; 返回顶部</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u1045" class="ax_default paragraph">
              <div id="u1045_div" class=""></div>
              <div id="u1045_text" class="text ">
                <p><span></span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- header (Dynamic Panel) -->
      <div id="u1046" class="ax_default" data-label="header">
        <div id="u1046_state0" class="panel_state" data-label="State1" style="">
          <div id="u1046_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u1047" class="ax_default box_1">
              <div id="u1047_div" class=""></div>
            </div>

            <!-- Unnamed (Dynamic Panel) -->
            <div id="u1048" class="ax_default">
              <div id="u1048_state0" class="panel_state" data-label="State1" style="">
                <div id="u1048_state0_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1049" class="ax_default box_1">
                    <div id="u1049_div" class=""></div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1050" class="ax_default box_1">
                    <div id="u1050_div" class=""></div>
                    <div id="u1050_text" class="text ">
                      <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">资源下载</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1051" class="ax_default box_1">
                    <div id="u1051_div" class=""></div>
                    <div id="u1051_text" class="text ">
                      <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">使用说明</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Image) -->
                  <div id="u1052" class="ax_default image">
                    <img id="u1052_img" class="img " src="images/index/u10.png"/>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1053" class="ax_default box_1">
                    <img id="u1053_img" class="img " src="images/index/u11.png"/>
                    <div id="u1053_text" class="text ">
                      <p><span>&nbsp;iView Axure Library</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (SideNav) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u1055" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1055_div" class=""></div>
        <div id="u1055_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">对话框</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1056" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1056_div" class=""></div>
        <div id="u1056_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">通知提醒</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1057" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1057_div" class=""></div>
        <div id="u1057_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">全局提示</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1058" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1058_div" class=""></div>
        <div id="u1058_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">警告提示</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1059" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1059_div" class=""></div>
        <div id="u1059_text" class="text ">
          <p><span>视图</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1060" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1060_div" class=""></div>
        <div id="u1060_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">表单</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1061" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1061_div" class=""></div>
        <div id="u1061_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">颜色选择器</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1062" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1062_div" class=""></div>
        <div id="u1062_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">上传</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1063" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1063_div" class=""></div>
        <div id="u1063_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">评分</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1064" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1064_div" class=""></div>
        <div id="u1064_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">数字输入框</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1065" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1065_div" class=""></div>
        <div id="u1065_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">穿梭框</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1066" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1066_div" class=""></div>
        <div id="u1066_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">级联选择</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1067" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1067_div" class=""></div>
        <div id="u1067_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">时间选择器</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1068" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1068_div" class=""></div>
        <div id="u1068_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">日期选择器</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1069" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1069_div" class=""></div>
        <div id="u1069_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">滑块</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1070" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1070_div" class=""></div>
        <div id="u1070_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">选择器</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1071" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1071_div" class=""></div>
        <div id="u1071_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">表格</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1072" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1072_div" class=""></div>
        <div id="u1072_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">开关</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1073" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1073_div" class=""></div>
        <div id="u1073_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">多选框</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1074" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1074_div" class=""></div>
        <div id="u1074_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">单选框</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1075" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1075_div" class=""></div>
        <div id="u1075_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">输入框</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1076" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1076_div" class=""></div>
        <div id="u1076_text" class="text ">
          <p><span>表单</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1077" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1077_div" class=""></div>
        <div id="u1077_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">步骤条</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1078" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1078_div" class=""></div>
        <div id="u1078_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">锚点</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1079" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1079_div" class=""></div>
        <div id="u1079_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">徽标数</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1080" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1080_div" class=""></div>
        <div id="u1080_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">面包屑</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1081" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1081_div" class=""></div>
        <div id="u1081_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">分页</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1082" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1082_div" class=""></div>
        <div id="u1082_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">下拉菜单</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1083" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1083_div" class=""></div>
        <div id="u1083_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">标签页</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1084" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1084_div" class=""></div>
        <div id="u1084_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">导航菜单</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1085" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1085_div" class=""></div>
        <div id="u1085_text" class="text ">
          <p><span>导航</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1086" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1086_div" class=""></div>
        <div id="u1086_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">单元格</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1087" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1087_div" class=""></div>
        <div id="u1087_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">分割线</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1088" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1088_div" class=""></div>
        <div id="u1088_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">面板分割</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1089" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1089_div" class=""></div>
        <div id="u1089_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">折叠面板</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1090" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1090_div" class=""></div>
        <div id="u1090_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">卡片</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1091" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1091_div" class=""></div>
        <div id="u1091_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">布局</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1092" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1092_div" class=""></div>
        <div id="u1092_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">栅格</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1093" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1093_div" class=""></div>
        <div id="u1093_text" class="text ">
          <p><span>布局</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1094" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1094_div" class=""></div>
        <div id="u1094_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">图标</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1095" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1095_div" class=""></div>
        <div id="u1095_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">按钮</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1096" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1096_div" class=""></div>
        <div id="u1096_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">字体</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1097" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1097_div" class=""></div>
        <div id="u1097_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">色彩</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1098" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1098_div" class=""></div>
        <div id="u1098_text" class="text ">
          <p><span>基础</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1099" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1099_div" class=""></div>
        <div id="u1099_text" class="text ">
          <p><span>组件</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1100" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1100_div" class=""></div>
        <div id="u1100_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">资源下载</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1101" class="ax_default box_1 selected" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1101_div" class="selected"></div>
        <div id="u1101_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">使用说明</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1102" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1102_div" class=""></div>
        <div id="u1102_text" class="text ">
          <p><span>入门介绍</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1103" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1103_div" class=""></div>
        <div id="u1103_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">抽屉</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1104" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1104_div" class=""></div>
        <div id="u1104_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">树形控件</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1105" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1105_div" class=""></div>
        <div id="u1105_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">文字提示</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1106" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1106_div" class=""></div>
        <div id="u1106_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">气泡提示</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1107" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1107_div" class=""></div>
        <div id="u1107_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">进度条</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1108" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1108_div" class=""></div>
        <div id="u1108_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">头像</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1109" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1109_div" class=""></div>
        <div id="u1109_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">标签</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1110" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1110_div" class=""></div>
        <div id="u1110_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">走马灯</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1111" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1111_div" class=""></div>
        <div id="u1111_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">时间轴</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1112" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1112_div" class=""></div>
        <div id="u1112_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">相对时间</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1113" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1113_div" class=""></div>
        <div id="u1113_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">进度环</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1114" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1114_div" class=""></div>
        <div id="u1114_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">图钉</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1115" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1115_div" class=""></div>
        <div id="u1115_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">返回顶部</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1116" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1116_div" class=""></div>
        <div id="u1116_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">加载中</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1117" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-fenzu-light">
        <div id="u1117_div" class=""></div>
        <div id="u1117_text" class="text ">
          <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">无限滚动</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1118" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1118_div" class=""></div>
        <div id="u1118_text" class="text ">
          <p><span>图表</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1119" class="ax_default box_1" selectiongroup="u1054nav-cebianlan-light">
        <div id="u1119_div" class=""></div>
        <div id="u1119_text" class="text ">
          <p><span>其他</span></p>
        </div>
      </div>

      <!-- Unnamed (Footer) -->

      <!-- Unnamed (Dynamic Panel) -->
      <div id="u1121" class="ax_default">
        <div id="u1121_state0" class="panel_state" data-label="State1" style="">
          <div id="u1121_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u1122" class="ax_default box_1">
              <div id="u1122_div" class=""></div>
            </div>

            <!-- Unnamed (Dynamic Panel) -->
            <div id="u1123" class="ax_default">
              <div id="u1123_state0" class="panel_state" data-label="State1" style="">
                <div id="u1123_state0_content" class="panel_state_content">

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1124" class="ax_default box_1">
                    <div id="u1124_div" class=""></div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1125" class="ax_default label">
                    <div id="u1125_div" class=""></div>
                    <div id="u1125_text" class="text ">
                      <p><span>Axure组件库由 baozipm制作</span></p><p><span>UI与交互由iView团队设计</span></p><p><span>图标由Ionicon团队设计</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1126" class="ax_default label">
                    <div id="u1126_div" class=""></div>
                    <div id="u1126_text" class="text ">
                      <p><span>Contract Me</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Group) -->
                  <div id="u1127" class="ax_default" data-left="1" data-top="80" data-width="151" data-height="24">

                    <!-- Unnamed (Rectangle) -->
                    <div id="u1128" class="ax_default label">
                      <div id="u1128_div" class=""></div>
                      <div id="u1128_text" class="text ">
                        <p><span>bosenger@qq.com</span></p>
                      </div>
                    </div>

                    <!-- Unnamed (Rectangle) -->
                    <div id="u1129" class="ax_default paragraph">
                      <div id="u1129_div" class=""></div>
                      <div id="u1129_text" class="text ">
                        <p><span></span></p>
                      </div>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1130" class="ax_default label">
                    <div id="u1130_div" class=""></div>
                    <div id="u1130_text" class="text ">
                      <p><span>Copyright</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1131" class="ax_default label">
                    <div id="u1131_div" class=""></div>
                    <div id="u1131_text" class="text ">
                      <p><span>BaoziPM</span></p><p><span>iView</span></p><p><span>Ionicon</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1132" class="ax_default label">
                    <div id="u1132_div" class=""></div>
                    <div id="u1132_text" class="text ">
                      <p><span>相关站点</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Hot Spot) -->
                  <div id="u1133" class="ax_default">
                  </div>

                  <!-- Unnamed (Hot Spot) -->
                  <div id="u1134" class="ax_default">
                  </div>

                  <!-- Unnamed (Hot Spot) -->
                  <div id="u1135" class="ax_default">
                  </div>

                  <!-- Unnamed (Image) -->
                  <div id="u1136" class="ax_default image">
                    <img id="u1136_img" class="img " src="images/index/u95.png"/>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1137" class="ax_default label">
                    <div id="u1137_div" class=""></div>
                    <div id="u1137_text" class="text ">
                      <p><span>版本号1.1</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Rectangle) -->
                  <div id="u1138" class="ax_default paragraph">
                    <div id="u1138_div" class=""></div>
                    <div id="u1138_text" class="text ">
                      <p><span>www.baozipm.com</span></p>
                    </div>
                  </div>

                  <!-- Unnamed (Group) -->
                  <div id="u1139" class="ax_default" data-left="0" data-top="106" data-width="154" data-height="24">

                    <!-- Unnamed (Rectangle) -->
                    <div id="u1140" class="ax_default label">
                      <div id="u1140_div" class=""></div>
                      <div id="u1140_text" class="text ">
                        <p><span>www.baozipm.com</span></p>
                      </div>
                    </div>

                    <!-- Unnamed (Rectangle) -->
                    <div id="u1141" class="ax_default paragraph">
                      <div id="u1141_div" class=""></div>
                      <div id="u1141_text" class="text ">
                        <p><span></span></p>
                      </div>
                    </div>
                  </div>

                  <!-- Unnamed (Group) -->
                  <div id="u1142" class="ax_default" data-left="1" data-top="134" data-width="131" data-height="24">

                    <!-- Unnamed (Rectangle) -->
                    <div id="u1143" class="ax_default label">
                      <div id="u1143_div" class=""></div>
                      <div id="u1143_text" class="text ">
                        <p><span>iView Axure Git</span></p>
                      </div>
                    </div>

                    <!-- Unnamed (Rectangle) -->
                    <div id="u1144" class="ax_default paragraph">
                      <div id="u1144_div" class=""></div>
                      <div id="u1144_text" class="text ">
                        <p><span></span></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1145" class="ax_default box_1">
        <div id="u1145_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1146" class="ax_default box_1">
        <div id="u1146_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1147" class="ax_default box_1">
        <div id="u1147_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1148" class="ax_default box_1">
        <div id="u1148_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1149" class="ax_default heading_1">
        <div id="u1149_div" class=""></div>
        <div id="u1149_text" class="text ">
          <p><span>Layout 布局</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1150" class="ax_default label">
        <div id="u1150_div" class=""></div>
        <div id="u1150_text" class="text ">
          <p><span>协助进行页面级整体布局。</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1151" class="ax_default heading_1">
        <div id="u1151_div" class=""></div>
        <div id="u1151_text" class="text ">
          <p><span>设计规则</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1152" class="ax_default label">
        <div id="u1152_div" class=""></div>
        <div id="u1152_text" class="text ">
          <p><span>尺寸</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1153" class="ax_default label">
        <div id="u1153_div" class=""></div>
        <div id="u1153_text" class="text ">
          <p><span>一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。</span></p><p><span>&#149; 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。</span></p><p><span>&#149; 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。</span></p><p><span>&#149; 顶部导航高度的范围计算公式为：48+8n。</span></p><p><span>&#149; 侧边导航宽度的范围计算公式：200+8n。</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1154" class="ax_default label">
        <div id="u1154_div" class=""></div>
        <div id="u1154_text" class="text ">
          <p><span>交互</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1155" class="ax_default label">
        <div id="u1155_div" class=""></div>
        <div id="u1155_text" class="text ">
          <p><span>&#149; 一级导航和末级的导航需要在可视化的层面被强调出来；</span></p><p><span>&#149; 当前项应该在呈现上优先级最高；</span></p><p><span>&#149; 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；</span></p><p><span>&#149; 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1156" class="ax_default label">
        <div id="u1156_div" class=""></div>
        <div id="u1156_text" class="text ">
          <p><span>视觉</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1157" class="ax_default label">
        <div id="u1157_div" class=""></div>
        <div id="u1157_text" class="text ">
          <p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;">导航样式上需要根据信息层级合理的选择样式：</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;"><br></span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:500;">&#149; 大色块强调</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;">建议用于底色为深色系时，当前页面父级的导航项。</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;"><br></span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:500;">&#149; 高亮火柴棍</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;">当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;"><br></span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:500;">&#149; 字体高亮变色</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;">从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;"><br></span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:500;">&#149; 字体放大</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;">12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。</span></p><p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;"><br></span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1158" class="ax_default label">
        <div id="u1158_div" class=""></div>
        <div id="u1158_text" class="text ">
          <p><span>上中下布局</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1159" class="ax_default label">
        <div id="u1159_div" class=""></div>
        <div id="u1159_text" class="text ">
          <p><span>最基本的『上-中-下』布局。</span></p><p><span>一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1160" class="ax_default box_1">
        <div id="u1160_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1161" class="ax_default box_1">
        <div id="u1161_div" class=""></div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1162" class="ax_default" data-left="902" data-top="1049" data-width="408" data-height="64">

        <!-- Unnamed (Rectangle) -->
        <div id="u1163" class="ax_default box_1 selected" selectiongroup="buju-shangzhongxia">
          <img id="u1163_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1163_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 1</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1164" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1164_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1164_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 2</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1165" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1165_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1165_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 3</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1166" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1166_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1166_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 4</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1167" class="ax_default label">
        <div id="u1167_div" class=""></div>
        <div id="u1167_text" class="text ">
          <p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;">Home&nbsp; </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#E6E8EC;">/</span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;">&nbsp; Components&nbsp; </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#E6E8EC;">/</span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:650;font-style:normal;color:#515A6E;"> Layout</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1168" class="ax_default box_1">
        <div id="u1168_div" class=""></div>
        <div id="u1168_text" class="text ">
          <p><span>Content</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1169" class="ax_default paragraph">
        <div id="u1169_div" class=""></div>
        <div id="u1169_text" class="text ">
          <p><span>2011-2016 © TalkingData</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1170" class="ax_default label">
        <div id="u1170_div" class=""></div>
        <div id="u1170_text" class="text ">
          <p><span>顶部-侧边布局-通栏</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1171" class="ax_default label">
        <div id="u1171_div" class=""></div>
        <div id="u1171_text" class="text ">
          <p><span>同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。</span></p><p><span>侧边栏由于在原型制作时一般都会把自个子项展开，来方便功能的展示，且制作展开/收起的效果制作和维护成本都很高，所以此处没有对该效果进行支持</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1172" class="ax_default box_1">
        <div id="u1172_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1173" class="ax_default box_1">
        <div id="u1173_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1174" class="ax_default box_1">
        <div id="u1174_div" class=""></div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1175" class="ax_default" data-left="902" data-top="1663" data-width="408" data-height="64">

        <!-- Unnamed (Rectangle) -->
        <div id="u1176" class="ax_default box_1 selected" selectiongroup="buju-shangzhongxia">
          <img id="u1176_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1176_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 1</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1177" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1177_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1177_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 2</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1178" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1178_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1178_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 3</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1179" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1179_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1179_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 4</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1180" class="ax_default label">
        <div id="u1180_div" class=""></div>
        <div id="u1180_text" class="text ">
          <p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;">Home&nbsp; </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#E6E8EC;">/</span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;">&nbsp; Components&nbsp; </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#E6E8EC;">/</span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:650;font-style:normal;color:#515A6E;"> Layout</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1181" class="ax_default box_1">
        <div id="u1181_div" class=""></div>
        <div id="u1181_text" class="text ">
          <p><span>Content</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1182" class="ax_default paragraph">
        <div id="u1182_div" class=""></div>
        <div id="u1182_text" class="text ">
          <p><span>2011-2016 © TalkingData</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1183" class="ax_default box_1">
        <div id="u1183_div" class=""></div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1184" class="ax_default" data-left="231" data-top="1727" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1185" class="ax_default box_1">
          <div id="u1185_div" class=""></div>
          <div id="u1185_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 1</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1186" class="ax_default paragraph">
          <div id="u1186_div" class=""></div>
          <div id="u1186_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1187" class="ax_default box_1" selectiongroup="buju-cebianlan1">
        <img id="u1187_img" class="img " src="images/布局/u1187.png"/>
        <div id="u1187_text" class="text ">
          <p><span>Option 1</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1188" class="ax_default box_1 selected" selectiongroup="buju-cebianlan1">
        <img id="u1188_img" class="img " src="images/布局/u1187_selected.png"/>
        <div id="u1188_text" class="text ">
          <p><span>Option 2</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1189" class="ax_default box_1" selectiongroup="buju-cebianlan1">
        <img id="u1189_img" class="img " src="images/布局/u1187.png"/>
        <div id="u1189_text" class="text ">
          <p><span>Option 3</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1190" class="ax_default" data-left="231" data-top="1919" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1191" class="ax_default box_1">
          <div id="u1191_div" class=""></div>
          <div id="u1191_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 2</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1192" class="ax_default paragraph">
          <div id="u1192_div" class=""></div>
          <div id="u1192_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1193" class="ax_default" data-left="231" data-top="1967" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1194" class="ax_default box_1">
          <div id="u1194_div" class=""></div>
          <div id="u1194_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 3</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1195" class="ax_default paragraph">
          <div id="u1195_div" class=""></div>
          <div id="u1195_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1196" class="ax_default label">
        <div id="u1196_div" class=""></div>
        <div id="u1196_text" class="text ">
          <p><span>顶部-侧边布局</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1197" class="ax_default label">
        <div id="u1197_div" class=""></div>
        <div id="u1197_text" class="text ">
          <p><span>拥有顶部导航及侧边栏的页面，多用于展示类网站。</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1198" class="ax_default box_1">
        <div id="u1198_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1199" class="ax_default box_1">
        <div id="u1199_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1200" class="ax_default box_1">
        <div id="u1200_div" class=""></div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1201" class="ax_default" data-left="902" data-top="2251" data-width="408" data-height="64">

        <!-- Unnamed (Rectangle) -->
        <div id="u1202" class="ax_default box_1 selected" selectiongroup="buju-shangzhongxia">
          <img id="u1202_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1202_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 1</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1203" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1203_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1203_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 2</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1204" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1204_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1204_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 3</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1205" class="ax_default box_1" selectiongroup="buju-shangzhongxia">
          <img id="u1205_img" class="img " src="images/布局/u1163.png"/>
          <div id="u1205_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 4</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1206" class="ax_default label">
        <div id="u1206_div" class=""></div>
        <div id="u1206_text" class="text ">
          <p><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;">Home&nbsp; </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#E6E8EC;">/</span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;">&nbsp; Components&nbsp; </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#E6E8EC;">/</span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:400;color:#A4A4A5;"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';font-weight:650;font-style:normal;color:#515A6E;"> Layout</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1207" class="ax_default box_1">
        <div id="u1207_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1208" class="ax_default paragraph">
        <div id="u1208_div" class=""></div>
        <div id="u1208_text" class="text ">
          <p><span>2011-2016 © TalkingData</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1209" class="ax_default box_1">
        <div id="u1209_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1210" class="ax_default box_1 selected" selectiongroup="buju-cebianlan2">
        <img id="u1210_img" class="img " src="images/布局/u1187_selected.png"/>
        <div id="u1210_text" class="text ">
          <p><span>Option 1</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1211" class="ax_default box_1 selected" selectiongroup="buju-cebianlan2">
        <img id="u1211_img" class="img " src="images/布局/u1187_selected.png"/>
        <div id="u1211_text" class="text ">
          <p><span>Option 2</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1212" class="ax_default box_1 selected" selectiongroup="buju-cebianlan2">
        <img id="u1212_img" class="img " src="images/布局/u1187_selected.png"/>
        <div id="u1212_text" class="text ">
          <p><span>Option 3</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1213" class="ax_default" data-left="252" data-top="2383" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1214" class="ax_default box_1">
          <div id="u1214_div" class=""></div>
          <div id="u1214_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 1</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1215" class="ax_default paragraph">
          <div id="u1215_div" class=""></div>
          <div id="u1215_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1216" class="ax_default" data-left="252" data-top="2575" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1217" class="ax_default box_1">
          <div id="u1217_div" class=""></div>
          <div id="u1217_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 2</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1218" class="ax_default paragraph">
          <div id="u1218_div" class=""></div>
          <div id="u1218_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1219" class="ax_default" data-left="252" data-top="2623" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1220" class="ax_default box_1">
          <div id="u1220_div" class=""></div>
          <div id="u1220_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 3</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1221" class="ax_default paragraph">
          <div id="u1221_div" class=""></div>
          <div id="u1221_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1222" class="ax_default label">
        <div id="u1222_div" class=""></div>
        <div id="u1222_text" class="text ">
          <p><span>侧边布局 </span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1223" class="ax_default label">
        <div id="u1223_div" class=""></div>
        <div id="u1223_text" class="text ">
          <p><span>侧边两列式布局。页面横向空间有限时，侧边导航可收起。</span></p><p><span>侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1224" class="ax_default box_1" selectiongroup="buju-cebianlan3">
        <div id="u1224_div" class=""></div>
        <div id="u1224_text" class="text ">
          <p><span>Option 1</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1225" class="ax_default" data-left="231" data-top="3068" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1226" class="ax_default box_1">
          <div id="u1226_div" class=""></div>
          <div id="u1226_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'Monaco';"> </span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';">Item 1</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1227" class="ax_default paragraph">
          <div id="u1227_div" class=""></div>
          <div id="u1227_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1228" class="ax_default box_1 selected" selectiongroup="buju-cebianlan3">
        <div id="u1228_div" class="selected"></div>
        <div id="u1228_text" class="text ">
          <p><span>Option 2</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1229" class="ax_default box_1" selectiongroup="buju-cebianlan3">
        <div id="u1229_div" class=""></div>
        <div id="u1229_text" class="text ">
          <p><span>Option 3</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1230" class="ax_default" data-left="231" data-top="3260" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1231" class="ax_default box_1">
          <div id="u1231_div" class=""></div>
          <div id="u1231_text" class="text ">
            <p><span style="font-family:'Ionicons';"> </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">Item</span><span style="font-family:'Ionicons';"> </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">2</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1232" class="ax_default paragraph">
          <div id="u1232_div" class=""></div>
          <div id="u1232_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u1233" class="ax_default" data-left="231" data-top="3308" data-width="200" data-height="48">

        <!-- Unnamed (Rectangle) -->
        <div id="u1234" class="ax_default box_1">
          <div id="u1234_div" class=""></div>
          <div id="u1234_text" class="text ">
            <p><span style="font-family:'Ionicons';"> </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">Item</span><span style="font-family:'Ionicons';"> </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">3</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u1235" class="ax_default paragraph">
          <div id="u1235_div" class=""></div>
          <div id="u1235_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1236" class="ax_default heading_3">
        <div id="u1236_div" class=""></div>
        <div id="u1236_text" class="text ">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u1237" class="ax_default box_1">
        <div id="u1237_div" class=""></div>
        <div id="u1237_text" class="text ">
          <p><span>Content</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
